import style from "./index.module.scss";
import { options } from "@/app/utils";
import Link from "next/link";
import Image from "next/image";
function Index({ list }) {
  const getTags = (v) => {
    const arr = [];
    options.forEach((item) => {
      if ((item.value & v) > 0) {
        arr.push(item.label);
      }
    });
    return arr;
  };
  return (
    <ul className={style.list}>
      {list.map((item, index) => {
        return (
          <li key={item.id} className={style.listItem}>
            <Link href={`/content?mid=${item.id}`}>
              <div className={style.imgWraper}>
                <div className={style.cover}>
                  <div className={style.button}>使用模板</div>
                </div>
                <div className={style.img}>
                  <Image
                    width={0}
                    height={0}
                    sizes="100vw"
                    style={{ width: "100%", height: "auto", float: "left" }}
                    src={item.templateUrl + "?imageView2/2/w/800"}
                    alt={item.title}
                    title={item.title}
                  />
                </div>
              </div>
              <div className={style.info}>
                <h4 className={style.name}>{item.title}</h4>
                <div className={style.tags}>
                  {getTags(item.classify)?.map((t) => {
                    return (
                      <span key={t} className={style.tag}>
                        {t}
                      </span>
                    );
                  })}
                </div>
              </div>
            </Link>
            {/* <a href={`/content?mid=${item.id}`} >
            <div className={style.img}>
              <img src={item.templateUrl} alt={item.title} />
            </div>
            <div className={style.title}>
              <div style={{ float: 'left' }}>
                {item.title}
              </div>
            </div>
          </a> */}

            {/* <div>{item.description}</div> */}
          </li>
        );
      })}
    </ul>
  );
}

export default Index;
